import React, { Component } from 'react';

// 表单受控组件
class From extends Component {
    state = {
        username: "李铁",
        sel: '兄弟',
        sex: '男'
    }
    render() {
        return (
            <div>
                <p>
                    <input placeholder='用户名' name='username' value={this.state.username} onChange={(e) => this.handleChangeFn(e, 'username')} />
                </p>
                <p>
                    <select value={this.state.sel} name='sel' onChange={(e) => this.handleChangeFn(e, 'sel')}>
                        <option value='江山'>江山</option>
                        <option value='美人'>美人</option>
                        <option value='兄弟'>兄弟</option>
                    </select>
                </p>
                <p>
                    <input type='radio' value='男' name='sex' checked={this.state.sex === '男'} onChange={(e) => this.handleChangeFn(e, 'sex')} />男
                    <input type='radio' value='女' name='sex' checked={this.state.sex === '女'} onChange={(e) => this.handleChangeFn(e, 'sex')} />女
                </p>
                <p>
                    <button onClick={this.submitFn}>提交表单</button>
                </p>
            </div>
        );
    };
    handleChangeFn(e, key) {
        // console.log(e.target.value);
        // 方式1: 可以通过传递参数
        // 方式2: 通过e.target.name

        // setState 对象写法
        // this.setState({
        //     [key]: e.target.value
        // })

        // setStat的函数写法
        this.setState((state) => {
            // 修改state中某一个属性值为e.target.value
            state[key] = e.target.value
            return state
        })
    }
    // handleChangeFn1(e) {
    //     this.setState({
    //         sel: e.target.value
    //     })
    // }
    // handleChangeFn2(e) {
    //     console.log(e.target.value);
    //     this.setState({
    //         sex: e.target.value
    //     })
    // }
    submitFn = () => {
        console.log(this.state);
        // 接下来调用表单接口,传递参数
    }
}

export default From;
